<template>
  <view>
    <navigator open-type="navigateBack" class="close">
      <image
        src="../../../static/clos.png"
        mode="widthFix"
        style="width: 31rpx"
      ></image>
    </navigator>
    <view class="header">
      <view class="">添加银行卡</view>
    </view>
    <view class="yanzheng">请添加持卡人本人的银行卡</view>
    <view class="shuru">
      <input
        type="text"
        class="phone"
        v-model="user_name"
        maxlength="11"
        placeholder="持卡人"
      />
      <input
        type="number"
        class="phone"
        v-model="card_num"
        placeholder="卡号"
        @blur="confirm"
      />
      <input class="phone" v-model="bank_name" placeholder="银行名称" />
      <input
        class="phone"
        v-model="card_type"
        maxlength="6"
        placeholder="卡类型"
      />
    </view>
    <button type="default" class="btn" @click="addCard">确定</button>
  </view>
</template>

<script>
import bank from "../../../common/banktype.js";

export default {
  data() {
    return {
      user_name: "",
      card_num: "",
      bankList: "",
      cardTypeList: "",
      bank_name: "",
      card_type: "",
      value: "",
    };
  },
  onLoad() {
    this.bankList = bank.banktype;
    this.cardTypeList = bank.cardType;
    this.token = uni.getStorageSync("token");
  },
  watch: {},

  onShow() {},
  methods: {
    //获取银行卡类型
    confirm() {
      uni.request({
        url: "https://ccdcapi.alipay.com/validateAndCacheCardInfo.json",
        data: {
          cardNo: this.card_num,
          cardBinCheck: true,
        },

        success: (res) => {
          let code = res.data.bank;
          this.bank_name = this.bankList[code];
          this.card_type = this.cardTypeList[res.data.cardType];
        },
      });
    },
    // 添加银行卡
    async addCard() {
      if (this.user_name == "") {
        uni.showToast({
          title: "持卡人不能为空",
          icon: "none",
        });
        return;
      }
      if (this.card_num == "") {
        uni.showToast({
          title: "银行卡号不能为空",
          icon: "none",
        });
        return;
      }
      if (this.bank_name == "") {
        uni.showToast({
          title: "银行名称不能为空",
          icon: "none",
        });
        return;
      }
      if (this.card_type == "") {
        uni.showToast({
          title: "卡类型不能为空",
          icon: "none",
        });
        return;
      }
      let that = this;
      const res = await that.$myRequest({
        url: "bank/addBankCard",
        method: "POST",
        header: {
          token: that.token,
        },
        data: {
          card_num: this.card_num,
          user_name: this.user_name,
          bank_name: this.bank_name,
          card_type: this.card_type,
        },
      });
      if (res.data.code == 1) {
        this.card_num = "";
        this.user_name = "";
        this.bank_name = "";
        this.card_type = "";
        uni.showToast({
          title: res.data,
          icon: "none",
        });
      } else {
        uni.showToast({
          title: res.data.msg,
          icon: "none",
        });
      }
    },
  },
};
</script>

<style lang="scss">
.header {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 35rpx;
  color: #333333;
  padding-top: 80rpx;
  font-weight: 600;
}
.close {
  position: absolute;
  left: 49rpx;
  top: 85rpx;
}
.yanzheng {
  display: flex;
  justify-content: center;
  font-size: 28rpx;
  color: #666666;
  padding-top: 69rpx;
}
.shuru {
  padding: 60rpx 50rpx 45rpx 50rpx;

  .phone {
    font-size: 28rpx;
    width: 620rpx;
    height: 77rpx;
    background-color: #eeeeee;
    border-radius: 15rpx;
    padding-left: 30rpx;
    margin-top: 45rpx;
  }
  .type {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 45rpx;
    .phone {
      margin-top: 0;
    }
    text {
      position: absolute;
      left: 30rpx;
    }
  }
  .sendout {
    background-color: #333333;
    height: 77rpx;
    width: 200rpx;
    margin-top: 42rpx;
    color: #ffffff;
    font-size: 28rpx;
    border-radius: 0 17rpx 17rpx 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.btn {
  width: 650rpx;
  height: 77rpx;
  background-color: #c52b2e;
  line-height: 77rpx;
  color: #ffffff;
  border-radius: 15rpx;
}
</style>
